<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>password generator</title>

 <link rel="stylesheet" href="style.css">

</head>
<body>

  <header>
    <div class="logo">4Password</div>
     <div class="navlist">
        <ul>
            <li><a href="">Product</a></li>
            <li><a href="">Resources</a></li>
            <li><a href="">Support</a></li>
        </ul>
     </div>
    </div>
  
  </header>
  <main class="password-section">
      <div class="password-section-container">
        <h1>Generate a Strong Brand New PassWord to Secure Your Digital World</h1>
        <div class="password-generator-container">
           <div class="password-container">
            <h2>Generated password: 👇</h2>
            <div class="password"> 
                <h2> </h2>
            </div>
            <div class="generator-btns">
                <button class="generate-btn">Genereate</button>
                <button class="copy-btn">copy</button>
            </div>
            <p class="copy-text-alert">Password Copied</p>
           </div>

           <div class="customization-section">
             <div class="length-section"> 
              <label for="">Length</label>
              <input type="range" id="length" min="8" max="80" value="12">
              <p id="rangevalue">12</p>
             </div>
             <div class="num">
              <input type="checkbox" id="number">
              <label for="">Numbers</label>
              <input type="checkbox" id="uppercase">
              <label for="">UpperCase</label>
             </div>
             <div class="symbol"> 
              <input type="checkbox" id="symbol">
              <label for="">Symbol</label>
              <input type="checkbox" id="lowercase">
              <label for="">Lowercase</label>
             </div>
           </div>
        </div>
      </div>
  </main>
    <div class="pro">
      <p>Made with 💛 by <a href="https://github.com/pabitra0011">pabitra0011</a></p>
    </div>
    <script src="main.js"></script>
</body>
</html>